<template>
  <view class="product-info-block">
    <view class="product-sales-info">
      <view class="product-price">
        <view class="label">
          到手价
        </view>
        <v-price
          size="56rpx"
          sign-size="30rpx"
          :price="sellPrice"
          :keep-decimal="false"
        />
        <view class="label">
          起
        </view>
        <view
          v-if="marketPrice"
          class="market-price"
        >
          {{ `¥${marketPrice.toFixed(2)}` }}
        </view>
      </view>
      <view
        v-if="product.sales_volume_type === 'SALES_VOLUME'"
        class="product-saled-count"
      >
        {{ `已售：${product.sales_volume}` }}
      </view>
      <view
        v-else-if="product.sales_volume_type === 'SALES_VOLUME_CUSTOMIZE'"
        class="product-saled-count"
      >
        {{ `已售：${product.custom_sales_volume ?? '0'}` }}
      </view>
    </view>
    <view class="product-name">
      <view
        v-if="product.prime_flag"
        class="tag prime"
      >
        精品
      </view>
      <view
        v-if="product.hot_selling_flag"
        class="tag hot-selling"
      >
        热卖
      </view>
      <view
        v-if="product.new_arrival_flag"
        class="tag new-arrival"
      >
        新品
      </view>
      <text>
        {{ product.name }}
      </text>
    </view>
    <view
      v-if="salesTag"
      class="product-info-quote"
    >
      <view class="quote-tag">
        {{ salesTag.name }}
      </view>
      <view class="quote-item">
        {{ salesTag.tag }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: SpuVO;
}>();

const salesTag = computed(() => {
  return props.product?.spu_tag_list?.find((item) => item.type === 'SALE_TAG');
});

const sellPrice = computed(() => {
  const defaultSku = props.product?.sku_list?.find(
    (item) => !!item.def_price_flag
  );
  return defaultSku?.sell_price || props.product.min_sell_price;
});

const marketPrice = computed(() => {
  const defaultSku = props.product?.sku_list?.find(
    (item) => !!item.def_price_flag
  );
  return defaultSku?.market_price || props.product.min_market_price;
});
</script>

<style lang="scss" scoped>
.product-info-block {
  position: relative;
  margin: 24rpx;
  padding: 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;

  .product-sales-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24rpx;
    .product-price {
      display: flex;
      align-items: baseline;
      gap: 0 8rpx;
      white-space: nowrap;
      .label {
        color: #ff2f3b;
        flex-shrink: 0;
      }
      .market-price {
        color: #999999;
        text-decoration: line-through;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
      }
    }
    .product-saled-count {
      color: #999999;
    }
  }

  .product-name {
    font-size: 36rpx;
    font-weight: bold;
    line-height: 50rpx;
    .tag {
      display: inline-flex;
      margin-right: 8rpx;
      margin-bottom: 3rpx;
      height: 36rpx;
      line-height: 36rpx;
      align-items: center;
      justify-content: center;
      color: white;
      white-space: nowrap;
      font-size: 24rpx;
      font-weight: normal;
      width: 60rpx;
      border-radius: 6rpx;
      vertical-align: middle;
      &.prime {
        background: linear-gradient(90deg, #ab6a12, #402302);
      }
      &.hot-selling {
        background: linear-gradient(90deg, #fc7529, #e92d00);
      }
      &.new-arrival {
        background: linear-gradient(90deg, #62d60d, #13ad5b);
      }
    }
  }

  .product-info-quote {
    height: 68rpx;
    padding: 0 10rpx;
    border-radius: 8rpx;
    background-color: rgba(153, 91, 30, 0.1);
    display: flex;
    align-items: center;
    font-size: 24rpx;
    gap: 0 6rpx;
    color: #995b1e;
    .quote-tag {
      font-size: 22rpx;
      line-height: 36rpx;
      color: white;
      padding: 0 8rpx;
      border-radius: 4rpx;
      background-color: #995b1e;
      margin-right: 8rpx;
    }
  }
}
</style>
